<template>
  <div>
    <el-button
      type="primary"
      @click="dialogVisible=true"
      >
      批量添加数据
    </el-button>

    <el-dialog
      title="批量添加数据"
      :visible.sync="dialogVisible"
      width="50%"
      append-to-body
      >

      <div class="prompt">
        <h4>
          请先下载Excel模板，在Excel模板文件里填写完成后在将Excel文件上传到下方区域
        </h4>
        <el-button
        type="primary"
        @click="$exportExcel([],`${Year}模板`)"
        plain>
        下载模板
        </el-button>
      </div>
      <UploadExcel :onSuccess="onSuccess"></UploadExcel>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadExcel from '@/views/UploadExcel/UploadExcel.vue'
export default {
  name: 'batchAddBtn',
  components: {
    UploadExcel
  },
  props: {
    Year: {
      type: String
    }
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    // 导入Excel文件
    onSuccess ({ header, results }) {
      const ExcelData = []
      const headersRelations = {
        工作月份: 'gzyf',
        到手工资: 'dsgz',
        预计还款: 'yjhk',
        生活费用: 'shfy',
        '发薪(还款)月份': 'fxhkyf',
        消费明细: 'xfmx',
        状态: 'tag'
      }

      results.forEach(item => {
        const obj = {}
        for (const key in item) {
          const englishKey = headersRelations[key]
          obj[englishKey] = String(item[key])
        }
        ExcelData.push(obj)
      })
      this.dialogVisible = false
      this.$emit('importData', ExcelData)
    }
  }
}
</script>

<style lang="scss" scoped>
.prompt{
  text-align: center;
  margin-bottom: 20px;
  font-size: 18px;
  h4{
    line-height: 60px;
  }
}
  ::v-deep .el-button{
    height: 45px;
    margin: 0 10px;
  }
</style>
